<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="分享想法"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 文章内容填写组件 -->
            <textarea
                class="artical-write-box"
                placeholder="请发表您对产品的评论吧！"
                v-model="articalWord"
                @blur="goBottom"
            ></textarea>
            <!-- 文章内容填写组件 -->

            <!-- 文章图片上传组件 -->
            <div class="img-upload-box">
                <div
                    class="img-item"
                    v-for="(item,index) of imgPreview"
                    :key="index"
                >
                    <img
                        class="delete"
                        src="@/assets/images/socialSystem/delete-icon.png"
                        @click="deleteUpload(index)"
                    />
                    <img
                        class="img"
                        :src="item"
                    />
                </div>
                <div
                    class="img-upload-btn"
                    @click="selectPic"
                ></div>
            </div>
            <!-- 文章图片上传组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <div
            class="publish-btn"
            @click="publishArtical"
        >发表</div>
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import wx from 'weixin-js-sdk'
export default {
    name: 'WriteArtical',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.2rem',
                background: '#fff'
            },
            articalWord: '',
            maxLength: 0,
            imgPreview: [],
            imgsId: [],
            localIds: [],
            localId: '',
            isLoad: false
        }
    },
    methods: {
        selectPic() {
            const that = this
            if (this.imgPreview.length == 9) {
                this.commonDialog.alert('提示', '最多上传9张照片！')
                return
            } else {
                this.maxLength = 9 - this.imgPreview.length
            }
            wx.chooseImage({
                count: that.maxLength, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function(res) {
                    that.localIds = res.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    that.syncUpload()
                }
            })
        },
        deleteUpload(index) {
            this.imgPreview.splice(index, 1)
            this.imgsId.splice(index, 1)
        },
        syncUpload() {
            const that = this
            let ios
            let ua = navigator.userAgent.toLowerCase()
            if (ua.match(/iphone/i) == 'micromessenger') {
                ios = true
            } else {
                ios = false
            }
            if (!this.localIds.length) {
                commonDialog.alert('提示', '照片上传成功！')
            } else {
                this.localId = this.localIds.pop()
                wx.uploadImage({
                    localId: that.localId,
                    isShowProgressTips: 0,
                    success: function(res) {
                        let serverId = res.serverId
                        that.imgsId.push(serverId)
                        if (ios || window.__wxjs_is_wkwebview) {
                            wx.getLocalImgData({
                                localId: that.localId,
                                success: function(res) {
                                    let localData = res.localData // localData是图片的base64数据，可以用img标签显示
                                    localData = localData.replace('jgp', 'jpeg')
                                    that.imgPreview.push(localData)
                                },
                                fail: function(res) {}
                            })
                        } else {
                            that.imgPreview.push(that.localId)
                        }
                        that.syncUpload()
                    }
                })
            }
        },
        publishArtical() {
            if (this.isLoad) {
                this.commonDialog.alert('提示', '请勿重复提交！')
                return
            }
            if (this.articalWord == '') {
                this.commonDialog.alert('提示', '请填写分享内容！')
                return
            }
            this.isLoad = true
            const that = this
            let postData = this.qs.stringify({
                content: this.articalWord,
                imgs: this.imgsId
            })
            this.axios.post('/api/moments/save.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.isLoad = false
                    this.commonDialog.alert('提示', '发表成功！', function() {
                        that.$router.push('/socialSystem')
                    })
                } else {
                    this.isLoad = false
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        goBottom() {
            window.scroll(0, 0)
        }
    }
}
</script>

<style lang="stylus" scoped>
.artical-write-box
    width 100%
    height 6.4rem
    padding 0.42rem 0.4rem
    font-size 0.4rem
    color #333
    border none
    resize none
    outline none
    box-sizing border-box
.artical-write-box::-webkit-input-placeholder
    color #bec0c0
.img-upload-box
    display flex
    flex-wrap wrap
    padding 0 0.4rem
    .img-item
        position relative
        width 1.49rem
        height 1.49rem
        border-radius 3px
        margin-right 0.8rem
        margin-bottom 0.6rem
        .delete
            position absolute
            top -0.24rem
            right -0.24rem
            height 0.48rem
            width 0.48rem
        .img
            width 100%
            height 100%
            border-radius 3px
    .img-upload-btn
        width 1.49rem
        height 1.49rem
        border-radius 3px
        overflow hidden
        background-image url('../../assets/images/socialSystem/upload-icon.png')
        background-size 100% 100%
        background-repeat no-repeat
.publish-btn
    position absolute
    left 0
    right 0
    bottom 0
    height 1.2rem
    line-height 1.2rem
    text-align center
    background #d7463c
    font-size 0.48rem
    color #fff
</style>


